<template>
	<div class="address_edit">
		<!-- 直接使用Vant地址编辑组件，具体用法参见官网 -->
		<van-address-edit :area-list="areaList" :address-info="addressInfo" show-postal show-delete show-set-default
			:area-columns-placeholder="['请选择', '请选择', '请选择']" @save="onSave" @delete="onDelete">
			<div solt="default" class="tips">
				提醒：每次下单时会使用该地址，实际下单地址会根据您购物切换的地区进行智能判断，请在下单时确认。
			</div>
		</van-address-edit>
	</div>
</template>

<script>
	import { showToast } from 'vant';
	import { areaList } from "@vant/area-data";
	import { getAddressDetailByIdAPI, saveAddressAPI, deleteAddressByIdAPI, } from "@/api/address.js";
	export default {
		data() {
			return {
				id: parseInt(this.$route.query.id) || 0, //注意路由传参的方式
				areaList, //地区列表
				//addressInfo数据结构参见官网文档AddressEditInfo类型
				addressInfo: {
					//收货人信息初始值
					id: "", //每条地址的唯一标识
					name: "", //姓名
					tel: "", //电话
					province: "", //省份
					city: "", //城市
					county: "", //区县
					areaCode: "", //地区编码，通过省市区选择获取（必填）
					postalCode: "", //邮政编码
					addressDetail: "", //详细地址
					isDefault: false, //是否选择默认
				},
			};
		},
		//生命周期调用
		created() {
			this.getAddressDetail();
		},
		methods: {
			//根据id获取地址数据
			getAddressDetail() {
				if (!this.id) {
					console.log(this.id); //调使输出 id==0 则是新增 否则是编辑              
					return;
				}
				//调用接口，获取登录用户的收货地址
				getAddressDetailByIdAPI(this.id).then(result => {
					this.addressInfo.id = result.data.id;
					this.addressInfo.name = result.data.name;
					this.addressInfo.tel = result.data.tel;
					this.addressInfo.province = result.data.province;
					this.addressInfo.city = result.data.city;
					this.addressInfo.county = result.data.county;
					this.addressInfo.areaCode = result.data.area_code;
					this.addressInfo.postalCode = result.data.postal_code;
					this.addressInfo.addressDetail = result.data.address_detail;
					this.addressInfo.isDefault = result.data.is_default == 1 ? true : false;
				}).catch(() => {});
			},

			//处理保存地址
			onSave(content) {
				//准备参数，参数属性名参见接口文档
				let params = {};
				params.id = content.id;
				params.name = content.name;
				params.tel = content.tel;
				params.province = content.province;
				params.city = content.city;
				params.county = content.county;
				params.area_code = content.areaCode;
				params.postal_code = content.postalCode;
				params.address_detail = content.addressDetail;
				params.is_default = content.isDefault == true ? 1 : 0;
				//调用接口
				saveAddressAPI(params).then(result => {
					showToast(result.msg); //地址修改成功
					setTimeout(() => {
						this.$router.go(-1);
					}, 1000);
				});
			},

			// 处理删除地址
			onDelete(content) {
				let id = content.id;
				if (!id) return;
				//调用接口
				deleteAddressByIdAPI(id).then(result => {
					showToast(result.msg); //删除成功
					setTimeout(() => {
						this.$router.go(-1); //页面跳转
					}, 1000);
				});
			},

		},
	};
</script>

<style scoped lang="less">
	@bgColor: #f8f8f8;
	@mainColor: #ff0000;

	.address_edit {
		/deep/.van-address-edit {
			border-top: 5px solid @bgColor;
			position: relative;

			.van-address-edit__buttons {
				margin-top: 70px;

				.van-button--danger {
					background: @mainColor;
					border-color: @mainColor;
				}
			}

			.tips {
				padding: 12px 12px;
				font-size: 12px;
				color: @mainColor;
			}
		}
	}
</style>